<script lang="ts" setup>
import MyHeader from '@/components/header/myHeader.vue'
import { ref, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { searchAPI, searchHotAPI } from '@/services/search'
const search = ref('')
const searchList = ref<any>()
// 搜索历史
const historyList = ref<string[]>([])
historyList.value = uni.getStorageSync('search-history-list') || []
function searchData() {
  if (search.value == '') {
    searchList.value = []
    return
  }
  searchAPI(search.value).then((res) => {
    searchList.value = res.result.songs
  })
}

function delHistory() {
  uni.showModal({
    title: '提示',
    content: '确定清空全部历史记录？',
    success: function (res) {
      if (!res.confirm) {
        return
      }
      historyList.value = []
      uni.removeStorageSync('search-history-list')
    },
  })
}

function searchBlur() {
  if (search.value == '') return
  historyList.value.push(search.value)
  uni.setStorageSync('search-history-list', historyList.value)
}

function toPlay(id: any) {
  uni.navigateTo({
    url: `/pages/play/play?id=${id}`,
  })
}
const searchHotList = ref<any[]>([])
function searchHotData() {
  searchHotAPI().then((res) => {
    searchHotList.value = res.result.hots
  })
}

onLoad(() => {
  searchHotData()
})

watch(search, () => {
  searchData()
})
</script>
<template>
  <view class="search">
    <MyHeader title="搜索" />
    <view class="search-box">
      <view class="iconfont icon-sousuo"></view>
      <input
        v-model="search"
        type="text"
        @keyup.enter="searchData"
        @blur="searchBlur"
        class="search-input"
        placeholder="请输入搜索内容"
      />
    </view>
    <view v-if="search == ''" class="search-show">
      <view class="history-title">
        <text>搜索历史</text>
        <view @click="delHistory" class="iconfont icon-shanchu"></view>
      </view>
      <view class="search-history-list">
        <view v-for="(item, index) in historyList" :key="index" class="search-history">
          <view @click="search = item">{{ item }}</view>
        </view>
      </view>
      <view class="history-title">
        <text>搜索热榜</text>
        <view></view>
      </view>
      <view class="search-hot-list">
        <view v-for="(item, index) in searchHotList" :key="index" class="search-hot-item">
          <view @click="search = item.first">
            <view class="no">{{ index }}</view>
            {{ item.first }}</view
          >
        </view>
      </view>
    </view>
    <view class="search-list" v-else>
      <view
        v-for="(item, index) in searchList"
        :key="index"
        @click="toPlay(item.id)"
        class="search-list-item"
      >
        <view class="iconfont icon-sousuo"></view>
        <view class="search-name">{{ item.name }}</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.search {
  .search-box {
    width: 100%;
    position: relative;
    .search-input {
      background: #f7f7f7;
      margin: 20px 15px;
      height: 40px;
      border-radius: 20px;
      text-indent: 2.3rem;
      color: #000;
    }
    .icon-sousuo {
      position: absolute;
      top: 10px;
      left: 28px;
      font-size: 18px;
      color: #b9b9b9;
    }
  }
  .search-text {
    margin-left: 25px;
    color: #69a2cb;
  }
  .search-show {
    margin-top: 30px;
    padding: 0 20px;
    .history-title {
      font-size: 16px;
      font-weight: 550;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .search-history-list {
      margin-top: 25px;
      display: flex;
      flex-wrap: wrap;
      .search-history {
        padding: 8px;
        margin-bottom: 15px;
        margin-right: 15px;
        background: #f7f7f7;
        border-radius: 15px;
        font-size: 14px;
      }
    }
    .search-hot-list {
      padding-top: 20px;
      .search-hot-item {
        margin-bottom: 20px;
        view {
          display: flex;
          margin-right: 10px;
        }
      }
    }
  }
  .search-list {
    padding: 0px 25px;
    padding-bottom: 30px;
    .search-list-item {
      display: flex;
      margin-top: 20px;
      display: flex;
      align-items: center;
      color: #a3a3a3;
    }
    .icon-sousuo {
      margin-right: 15px;
      font-size: 20px;
    }
  }
}
</style>
